import 'package:flutter/material.dart';
import 'package:linphone_flutter_example/phone_view_model.dart';
import 'package:provider/provider.dart';

class Incoming extends StatefulWidget {
  const Incoming({Key? key}) : super(key: key);

  @override
  State<Incoming> createState() => _IncomingState();
}

class _IncomingState extends State<Incoming> {
  late PhoneViewModel read;
  late PhoneViewModel watch;

  @override
  void initState() {
    read = context.read<PhoneViewModel>();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
     watch = context.watch<PhoneViewModel>();
    return WillPopScope(
        onWillPop: () async {
          return false;
        },
        child: Scaffold(
          body: ListView(padding: const EdgeInsets.all(48), children: [
            const SizedBox(height: 48),
            Text(
              watch.remoteUri!,
              style: const TextStyle(
                fontSize: 40,
                color: Color(0xff333333),
              ),
              textAlign: TextAlign.center,
            ),
            Text(
              watch.isCalling ? "on_call" : "call_ringing",
              style: const TextStyle(
                fontSize: 20,
                color: Color(0xff11aa66),
              ),
              textAlign: TextAlign.center,
            ),
          ]),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerFloat,
          floatingActionButton:
              watch.isCalling ? callingButton() : incomingButton(),
        ));
  }

  incomingButton() {
    return Column(mainAxisSize: MainAxisSize.min, children: [
      Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        InkWell(
            onTap: () {
              read.terminate();
            },
            child: Container(
              height: 72,
              width: 72,
              decoration: const BoxDecoration(
                borderRadius:
                    BorderRadius.all(Radius.elliptical(9999.0, 9999.0)),
                color: Color(0xFFE85B5B),
              ),
              child: const Icon(Icons.phone, color: Colors.white, size: 32),
            )),
        const SizedBox(width: 72),
        InkWell(
            onTap: () {
              read.accept();
            },
            child: Container(
              height: 72,
              width: 72,
              decoration: const BoxDecoration(
                borderRadius:
                    BorderRadius.all(Radius.elliptical(9999.0, 9999.0)),
                color: Color(0xff11aa66),
              ),
              child: const Icon(Icons.phone, color: Colors.white, size: 32),
            )),
      ]),
      const SizedBox(height: 16),
    ]);
  }

  callingButton() {

    return Column(mainAxisSize: MainAxisSize.min, children: [
      Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        InkWell(
            onTap: () {
              read.setMic();
            },
            child: Container(
              height: 64,
              width: 64,
              decoration: const BoxDecoration(
                borderRadius:
                    BorderRadius.all(Radius.elliptical(9999.0, 9999.0)),
                color: Color(0xfff3f5f7),
              ),
              child: Icon(watch.micEnable ? Icons.mic : Icons.mic_off,
                  color: const Color(0xFFA7A4B8), size: 32),
            )),
        const SizedBox(width: 32),
        InkWell(
            onTap: () {
              read.hangUp();
            },
            child: Container(
              height: 72,
              width: 72,
              decoration: const BoxDecoration(
                borderRadius:
                    BorderRadius.all(Radius.elliptical(9999.0, 9999.0)),
                color: Color(0xFFE85B5B),
              ),
              child: const Icon(Icons.phone, color: Colors.white, size: 32),
            )),
        const SizedBox(width: 32),
        InkWell(
          onTap: () {
            read.toggleSpeaker();
          },
          child: Container(
              height: 64,
              width: 64,
              decoration: const BoxDecoration(
                borderRadius:
                    BorderRadius.all(Radius.elliptical(9999.0, 9999.0)),
                color: Color(0xfff3f5f7),
              ),
              child: Icon(watch.isSpeaker ? Icons.volume_up : Icons.volume_mute,
                  color: const Color(0xFFA7A4B8), size: 32)),
        ),
      ]),
      const SizedBox(height: 16),
      Visibility(
          visible: watch.isCalling,
          child: TextButton(
              onPressed: () {
                Navigator.pushNamed(context, "voice_phone");
              },
              child: Text(
                "call_transfer",
                style: const TextStyle(
                  fontSize: 18,
                  color: Color(0xffa7a4b8),
                ),
                textAlign: TextAlign.center,
              )))
    ]);
  }
}
